const HTMLWebpackPlugin = require('html-webpack-plugin');
const path = require('path');

// 默认导出一个对象
module.exports = {
  // mode: 模式，可以是 development : 开发模式代码没有压缩 或 production:代码压缩
  mode: 'development',
  // entry:入口文件，可以是多个
  entry: {
    index: './src/index.js',
    // second: './src/second.js'
  },
  // output: 输出文件
  output: {
    // 输出的文件名字
    filename: 'bundle.js',
    // 输出的路径
    path: __dirname + '/dist'
  },
  // module: 模块，可以是多个
  module: {
    // rules: 规则，可以是多个
    rules: [
      {
        // 匹配.js或.jsx后缀的文件
        test: /\.(js|jsx)$/,
        // 不包括node_modules文件夹
        exclude: /node_modules/,
        use: {
          // 编译器使用babel-loader 变成成es5
          loader: 'babel-loader',
          // 配置参数
          options: {
            // presets 预设 @babel/preset-env: 按照最新的es6规范转换
            // @babel/preset-react 编译jsx语法
            presets: ['@babel/preset-env','@babel/preset-react'],
            // @babel/plugin-syntax-jsx 检测jsx语法
            plugins: ['@babel/plugin-syntax-jsx']
          }
        }
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.(png|svg|jpg|gif)$/,
        use: ['file-loader']
      }
    ]
  },
  plugins: [
    // 运行在html文件中
    new HTMLWebpackPlugin({
      // 模板文件
      template: './src/index.html'
    })
  ],
  // resolve 作用是解析文件的路径
  resolve: {
    // 匹配文件的后缀名
    extensions: ['.js', '.jsx','.json','.css'],
    // 别名
    alias: {
      // 每次引入文件时，都会替换成src文件夹
      '@': path.resolve(__dirname, 'src')
    }
  } 
}